<!--
  都是从拓扑进行的数据操作
-->
<template>
  <div>
      <el-table
          :data="listInfos"
          style="width: 100%"
          title="网元信息列表"
          :row-class-name="rowStyleSet">
        <el-table-column
            prop="node-id"
            label="网元名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="netconf-node-topology:connection-status"
            label="连接状态"
            width="180">
        </el-table-column>
        <el-table-column
            prop="netconf-node-topology:host"
            label="设备地址">
        </el-table-column>
        <el-table-column
            prop="netconf-node-topology:port"
            label="设备端口">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components:{},
  data() {
    return {
      listInfos:[{
        'node-id': '',
        'netconf-node-topology:connection-status': '',
        'netconf-node-topology:port': '',
        'netconf-node-topology:host': '',
      }],
    };
  },
  methods: {
    getInfo(){
      axios.get('/list/devices').then(
          response => {
            console.log("请求成功", response.data);
            this.listInfos = response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex){
        return 'other-row';
      }
      if (rowIndex === 2) {
        return 'warning-row';
      } else if (rowIndex === 1) {
        return 'success-row';
      }
      return '';
    },
    rowStyleSet({row, column, rowIndex, columnIndex}){
      if (columnIndex ===1 && column.applies === "connected"){
        return 'success-row';
      }
    }
  }
}
</script>